<template>
  <div class="article">
    <el-row :gutter="10" justify="center">
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card shadow="never" class="el-card">
          <template #header>
            <el-page-header title="返回上级" @back="$router.back()" :content="title"> </el-page-header>
            <el-page-header title="返回首页" @back="$router.push('/homepage')"> </el-page-header>
          </template>
          <h1 style="text-align: left;color: chocolate">{{ article.articleTitle }}</h1><br>
          <div style="text-align: left">
            <strong>
              <i class="iconfont icon-yonghuming"/> 作者：{{article.author}}&nbsp;
              <i class="iconfont icon-wenzhangfenlei"/> 文章分类：{{ article.articleType==='NEWS' ? '景区新闻' : '景区公告' }}&nbsp;
              <i class="iconfont icon-date"/> 发布日期：{{article.publishTime}}
              <i class="iconfont icon-date"/> 阅读量：{{article.views}}
            </strong>
          </div>
          <el-divider/>
          <div style="text-align: left;" v-html="article.articleContent" />
        </el-card>
      </el-col>
<!--      搜索卡片-->
      <el-col :xs="24" :sm="24" :md="6" :lg="6" class="hidden-sm-and-down " >
        <el-affix>
       <Search :articleType="type"/>
        </el-affix>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getArticleById, updateArticleView} from "@/api/multimedia";
import ShowResult from "@/views/article/showArticle/showResult";
import Search from "@/views/article/showArticle/search";
import {mapGetters} from "vuex";
export default {
  name: "showArticle",
  components: {Search, ShowResult},
  data(){
    return{
      article: {},
      type:'',
    }
  },
  watch:{
    //监视$route.params.articleId
    $route:{
     handler(){
       if (this.$route.params.articleId){
         let keyValue=''
         if (this.userId===''){
           keyValue='client'
         }else {
           keyValue=this.userId
         }
         const id=this.$route.params.articleId
         //从localStorage取出已经阅读的文章id列表
         let item = localStorage.getItem(keyValue);
         if (item!==null){
           const array=item.split('|')
           if (array.indexOf(id)===-1){
             item=item+'|'+this.$route.params.articleId
             localStorage.setItem(keyValue,item)
             updateArticleView(id).then(()=>{
               this.getArticle(id)
             }).catch(()=>{})
             this.getArticle(id)
           }else {
             this.getArticle(id)
           }
         }else {
           updateArticleView(id).then(()=>{
             this.getArticle(id)
           }).catch(()=>{
             this.getArticle(id)
           })
           localStorage.setItem(keyValue,id)
         }
       }
     },
      immediate:true
    }
  },
  created() {
  },
  computed:{
    ...mapGetters(['userId']),
    title(){
      if (this.article.articleType==='NEWS'){
        this.type='NEWS'
        return '新闻详情'
      }
      else{
        this.type="ANNOUNCE"
        return '公告详情'
      }

    }
  },

  methods:{
    getArticle(id){
      getArticleById(id).then(response =>{
        this.article=response.data.article
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input{
  width: 250px;
}
.article{
  margin-top: 20px;
}
.tra{
  animation: rotate 6s linear infinite;
}
</style>
